<template>
	<div class="category-page">
		<!-- 表格数据 -->
		<div class="w-full h-[90%]">
			<RichTable
				:data="tableData"
				:fields="fields"
				@on-delete="handleBatchDelete"
				@on-add="addDialogVisible = true"
				@on-selection-change="handleSelectionChange">
				<el-table-column label="操作" fixed="right">
					<template #default="scope">
						<el-button link type="success" size="small" @click="handleSetEdit(scope.row)">
							修改
						</el-button>
						<el-button link type="danger" size="small" @click="handleDelete(scope.row._id)">
							删除
						</el-button>
					</template>
				</el-table-column>
			</RichTable>
		</div>

		<!-- 添加分类 -->
		<els-dialog v-model="addDialogVisible" title="添加分类">
			<div>
				<el-input v-model="addName" placeholder="请输入分类名称" />
			</div>
			<div class="my-2">
				<el-input v-model="addDescription" placeholder="请输入分类描述" />
			</div>
			<div class="w-full">
				<el-button class="w-full" @click="handleAdd" type="primary">创建分类</el-button>
			</div>
		</els-dialog>

		<!-- 修改分类 -->
		<els-dialog v-model="editDialogVisible" title="修改分类">
			<div>
				<el-input v-model="editName" placeholder="请输入分类名称" />
			</div>
			<div class="my-2">
				<el-input v-model="editDescription" placeholder="请输入分类描述" />
			</div>
			<div class="w-full">
				<el-button class="w-full" @click="handleEdit" type="primary">修改分类</el-button>
			</div>
		</els-dialog>

		<div class="flex items-center justify-between py-2">
			<div class="mr-2 flex items-center">
				<el-text type="info" size="small">选中：{{ selectList.length }}项</el-text>
			</div>
		</div>
	</div>
</template>

<script name="CategoryPage" lang="ts" setup>
import type { TableFields } from '~/components/RichTable/types';
import type { ICategory } from '~/server/models/category.model';

// 添加分类
const addDialogVisible = ref<boolean>(false);
const addName = ref<string>('');
const addDescription = ref<string>('');
const handleAdd = (): void => {
	$fetch('/api/admin/category/create', {
		method: 'POST',
		body: {
			name: addName.value,
			description: addDescription.value,
		},
	}).then((res: any) => {
		if (res.code === 1) {
			ElMessage.success('添加成功');
			addDialogVisible.value = false;
			addName.value = '';
			addDescription.value = '';
			getTableData();
		} else {
			ElMessage.error(res.message);
		}
	});
};

// 修改分类
const editId = ref<string>('');
const editName = ref<string>('');
const editDescription = ref<string>('');
const editDialogVisible = ref<boolean>(false);

const handleSetEdit = (row: ICategory): void => {
	editId.value = row._id;
	editName.value = row.name;
	editDialogVisible.value = true;
	editDescription.value = row.description;
};

const handleEdit = (): void => {
	$fetch('/api/admin/category/update', {
		method: 'PATCH',
		body: {
			id: editId.value,
			name: editName.value,
			description: editDescription.value,
		},
	}).then((res: any) => {
		if (res.code === 1) {
			ElMessage.success('修改成功');
			editDialogVisible.value = false;
			editName.value = '';
			editDescription.value = '';
			getTableData();
		} else {
			ElMessage.error(res.message);
		}
	});
};

// 表格数据
const tableData = ref<ICategory[]>([]);

// 表格字段
const fields: TableFields = [
	{ type: 'text', label: 'ID', prop: '_id', sortable: true },
	{ type: 'text', label: '分类名称', prop: 'name' },
	{ type: 'text', label: '分类描述', prop: 'description' },
	{ type: 'text', label: '创建时间', prop: 'createdAt' },
	{ type: 'text', label: '更新时间', prop: 'updatedAt' },
];

// 删除
const handleDelete = (id: string): void => {
	ElMessageBox.confirm('删除后无法恢复，且相关分类的文章会一并删除，是否确认删除？', '警告', {
		type: 'warning',
	})
		.then(() => {
			$fetch('/api/admin/category/delete', {
				method: 'DELETE',
				query: { id },
			}).then((res: any) => {
				if (res.code === 1) {
					ElMessage.success('删除成功');
					getTableData();
				} else {
					ElMessage.error(res.message);
				}
			});
		})
		.catch(() => {
			ElMessage.info('取消删除');
		});
};

// 批量删除
const handleBatchDelete = (): void => {
	if (selectList.value.length === 0) {
		ElMessage.warning('请先选择要删除的文章');
		return;
	}
	ElMessageBox.confirm('删除后无法恢复，且相关分类的文章会一并删除，是否确认删除？', '警告', {
		type: 'warning',
	})
		.then(() => {
			$fetch('/api/admin/category/delete', {
				method: 'DELETE',
				query: { id: selectList.value.map((item) => item._id).join(',') },
			}).then((res: any) => {
				if (res.code === 1) {
					ElMessage.success(res.message);
					getTableData();
				} else {
					ElMessage.error(res.message);
				}
			});
		})
		.catch(() => {
			ElMessage.info('取消删除');
		});
};

// 选中项
const selectList = ref<ICategory[]>([]);
const handleSelectionChange = (items: ICategory[]): void => {
	selectList.value = items;
};

// 获取表格数据
const getTableData = (): void => {
	$fetch('/api/client/category/list').then((res: any) => {
		if (res.code === 1) {
			tableData.value = res.data.list;
		} else {
			ElMessage.error(res.message);
		}
	});
};
getTableData();
</script>
